﻿<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7]><html class="ie ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8]><html class="ie ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-cn"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../css/rule.css">
</head>
<body>

<h2 class="rule_hd">模块和组件</h2>
<div class="rule_cont">
    <!--S MD content -->
    <p>我们将具有一定公用行的DOM结构抽取成模块。包含全局模块（全站公用，比如翻页等），局部模块(部分页面用到)。全局模块存储在common文件夹。</p>
    <h3 id="常规结构">常规结构</h3>
    <ul>
        <li>最外层容器</li>
        <li>内部容器，便于设置统一的padding值，也更方便后期扩展样式。</li>
        <li>模块头部</li>
        <li>模块身体(可以出现多次)</li>
        <li>模块尾部(可以没有)</li>
    </ul>
    <p>如图：</p>
    <div class="figure">
        <img src="../images/rule/module_1.png" alt="模块结构示意图" /><p class="caption">模块结构示意图</p>
    </div>
    <p>如果要对该模块个性化样式，可在该模块最外层新增个性化的className，针对新的className来扩展表现。</p>
    <p>比如：<code>&lt;div class=&quot;mod_list hotsale_list&quot;&gt;</code></p>
    <!--E MD content -->
</div>

</body>
</html>
